import React from 'react'
import { Menu } from 'antd'
import JxIcon from '@c/jx-icon'

const MenuItem = Menu.Item
const SubMenu = Menu.SubMenu

const renderMenuItem = (item, onLink, subitem) => {
  const { name, icon, path, hidden} = item
  // console.log(path)
  return (
    hidden?
      null:
      <MenuItem key={path}>
        <div onClick={() => onLink(item, subitem)}>
          {icon && <JxIcon className={'menu-icon anticon'} icon={icon}/>}
          <span>{name}</span>
        </div>
      </MenuItem>
  )
}

const renderSubMenu = (subitem, onLink) => {
  const { name, icon, path, routes} = subitem
  return (
    <SubMenu
      key={path}
      title={
        <div>
          {icon && <JxIcon className={'menu-icon anticon'} icon={icon}/>}
          <span>{name}</span>
        </div>
      }
    >
      {routes.map(item => item.routes ? renderSubMenu(item, onLink) : renderMenuItem(item, onLink, subitem))}
    </SubMenu>
  )
}

export default ({ menus=[], onLink, ...props }) => {
  return(
    <Menu {...props}>
      {menus.map(subitem => subitem.routes ? renderSubMenu(subitem, onLink) : renderMenuItem(subitem, onLink, subitem))}
    </Menu>
  )
}

